<template>
	
	<view class="user-page">
		<view class="levelUpHelpCard">
			<view class="levelUpHelpCard-div level">您的身份</view>
			<view class="levelUpHelpCard-div name">
				<view>{{userDetails.level_txt}}</view>
			</view>
		</view>
		<view class="levelUpHelpAchievement">
				<view class="levelUpHelpCard-div maxAch">总业绩(元)</view>
				<view class="levelUpHelpCard-div ach">{{price}}</view>
		</view>
		<view class="mui-table-view">
				<view class="mui-table-view-cell mui-col-xs-6">
					<text style="font-size: 25px;">等级规则</text>
				</view>
				<view class="mui-table-view-cell mui-collapse">
					<text class="mui-navigate-right" >代理团队奖励</text>
					<view class="mui-collapse-content">
						<view style="white-space:pre-line;">
							<rich-text :nodes="userDetails.level_content"></rich-text>
						</view>
					</view>
				</view>
		</view>
	</view>

</template>

<script setup>
	import { ref,reactive } from "vue"
	import { onLoad } from '@dcloudio/uni-app';
	
	import { useUserStore } from '@/store/userStore';
	const userStore = useUserStore();
	
	const userDetails = reactive({});
	const price = ref(0);
	onLoad((options) => {
		price.value=options.price;
		Object.assign(userDetails,userStore.userDetails);
	});

	function goBack() {
		uni.navigateBack();
	}
</script>

<style scoped>
	
	.tab-bar {
		width: 100vw;
		background: #fff;
		border-bottom: 2rpx solid #f0f0f0;
		/* 保证横向滚动 */
		white-space: nowrap;
	}
	.tab-bar-inner {
		display: flex;
		flex-direction: row;
		width: max-content;
	}
	.tab-item {
		flex-shrink: 0;
		white-space: nowrap;
		padding: 0 36rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 26rpx;
		color: #666;
		border-bottom: 4rpx solid transparent;
		transition: all 0.2s;
	}
	.tab-item.active {
		color: #1976d2;
		border-bottom: 4rpx solid #1976d2;
		font-weight: bold;
	}

	.xsm-header-nullss {
	    width: 100%;
	    height: 3rem;
	}
	.levelUpHelpCard {
	    margin: 3% 1px;
	    padding-top: 2%;
	    padding-bottom: 5%;
	    font-weight: bold;
	    color: white;
	    background-color: #787F96;
	    border-radius: 0.5rem;
	    box-sizing: border-box;
	    position: relative;
	    z-index: 1;
	    box-shadow: 5px 5px 5px #888888;
	}
	.levelUpHelpCard > .level {
	    font-size: 15px;
	}
	.levelUpHelpCard > .levelUpHelpCard-div {
	    margin: 10%;
	    text-align: center;
	}
	.levelUpHelpCard > .name {
	    font-size: 25px;
	}
	.levelUpHelpCard > .levelUpHelpCard-div {
	    margin: 10%;
	    text-align: center;
	}
	.levelUpHelpAchievement {
	    text-align: center;
	    margin: -10% 1% 0;
	    padding: 5%;
	    font-weight: bold;
	    background-color: #FFFFFF;
	    border-radius: 0.5rem;
	    box-sizing: border-box;
	    position: relative;
	    z-index: 1;
	}
	.levelUpHelpAchievement > .levelUpHelpCard-div {
	    margin: 10%;
	}
	.levelUpHelpAchievement > .ach {
	    font-size: 25px;
	}
	.levelUpHelpAchievement > .levelUpHelpCard-div {
	    margin: 10%;
	}
	.mui-table-view {
	    position: relative;
	    margin-top: 0;
	    margin-bottom: 0;
	    padding-left: 0;
	    list-style: none;
	    background-color: #fff;
	}
	.mui-ios .mui-table-view-cell {
	    -webkit-transform-style: preserve-3d;
	    transform-style: preserve-3d;
	}
	.mui-table-view-cell {
	    position: relative;
	    overflow: hidden;
	    padding: 13px 15px;
	    -webkit-touch-callout: none;
	}
	.mui-col-xs-6 {
	    width: 50%;
	}
	.mui-table-view-cell {
	    position: relative;
	    overflow: hidden;
	    padding: 13px 15px;
	    -webkit-touch-callout: none;
	}
	.mui-table-view-cell > a:not(.mui-btn) {
	    position: relative;
	    display: block;
	    overflow: hidden;
	    margin: -11px -15px;
	    padding: inherit;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: inherit;
	}
	.mui-table-view-cell.mui-collapse .mui-collapse-content {
	    position: relative;
	    overflow: hidden;
	    margin: 11px -15px -11px;
	    padding: 8px 15px;
	    -webkit-transition: height .35s ease;
	    -o-transition: height .35s ease;
	    transition: height .35s ease;
	    background: white;
	}

	.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after {
	    content: '>';
	}
	.mui-navigate-right:after, .mui-push-right:after {
	    right: 15px;
	    content: '>';
	}
	.mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after {
	    font-family: Muiicons;
	    font-size: inherit;
	    line-height: 1;
	    position: absolute;
	    top: 50%;
	    display: inline-block;
	    -webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	    text-decoration: none;
	    color: #bbb;
	    -webkit-font-smoothing: antialiased;
	}
</style>